<!DOCTYPE html>
<html lang="en">

<head>
   <title>MIND MADE</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!--===============================================================================================-->	
	<link rel="icon" type="image/png" href="../ohj/images/icons/favicon.ico"/>
	<!--===============================================================================================-->
		<link rel="stylesheet" type="text/css" href="../ohj/vendor/bootstrap/css/bootstrap.min.css">
	<!--===============================================================================================-->
		<link rel="stylesheet" type="text/css" href="../ohj/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
	<!--===============================================================================================-->
		<link rel="stylesheet" type="text/css" href="../ohj/fonts/iconic/css/material-design-iconic-font.min.css">
	<!--===============================================================================================-->
		<link rel="stylesheet" type="text/css" href="../ohj/vendor/animate/animate.css">
	<!--===============================================================================================-->	
		<link rel="stylesheet" type="text/css" href="../ohj/vendor/css-hamburgers/hamburgers.min.css">
	<!--===============================================================================================-->
		<link rel="stylesheet" type="text/css" href="../ohj/vendor/animsition/css/animsition.min.css">
	<!--===============================================================================================-->
		<link rel="stylesheet" type="text/css" href="../ohj/vendor/select2/select2.min.css">
	<!--===============================================================================================-->	
		<link rel="stylesheet" type="text/css" href="../ohj/vendor/daterangepicker/daterangepicker.css">
	<!--===============================================================================================-->
		<link rel="stylesheet" type="text/css" href="../ohj/css/util.css">
		<link rel="stylesheet" type="text/css" href="../ohj/css/main.css">
	<!--===============================================================================================-->
	<!--===============================================================================================-->
	<link rel="icon" type="image/png" href="../PGJ/images/icons/favicon.png"/>
	<!--===============================================================================================-->
	   <link rel="stylesheet" type="text/css" href="../PGJ/vendor/bootstrap/css/bootstrap.min.css">
	<!--===============================================================================================-->
	   <link rel="stylesheet" type="text/css" href="../PGJ/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
	<!--===============================================================================================-->
	   <link rel="stylesheet" type="text/css" href="../PGJ/fonts/themify/themify-icons.css">
	<!--===============================================================================================-->
	   <link rel="stylesheet" type="text/css" href="../PGJ/fonts/Linearicons-Free-v1.0.0/icon-font.min.css">
	<!--===============================================================================================-->
	   <link rel="stylesheet" type="text/css" href="../PGJ/fonts/elegant-font/html-css/style.css">
	<!--===============================================================================================-->
	   <link rel="stylesheet" type="text/css" href="../PGJ/vendor/animate/animate.css">
	<!--===============================================================================================-->
	   <link rel="stylesheet" type="text/css" href="../PGJ/vendor/css-hamburgers/hamburgers.min.css">
	<!--===============================================================================================-->
	   <link rel="stylesheet" type="text/css" href="../PGJ/vendor/animsition/css/animsition.min.css">
	<!--===============================================================================================-->
	   <link rel="stylesheet" type="text/css" href="../PGJ/vendor/select2/select2.min.css">
	<!--===============================================================================================-->
	   <link rel="stylesheet" type="text/css" href="../PGJ/vendor/daterangepicker/daterangepicker.css">
	<!--===============================================================================================-->
	   <link rel="stylesheet" type="text/css" href="../PGJ/vendor/slick/slick.css">
	<!--===============================================================================================-->
	   <link rel="stylesheet" type="text/css" href="../PGJ/vendor/lightbox2/css/lightbox.min.css">
	<!--===============================================================================================-->
	   <link rel="stylesheet" type="text/css" href="../PGJ/css/util.css">
	   <link rel="stylesheet" type="text/css" href="../PGJ/css/main.css">
	<!--===============================================================================================-->
</head>

<body class="animsition">
   <!-- Header -->
   <header class="header3">
      <!-- Header desktop -->
      <div class="container-menu-header-v3">
         <div class="wrap_header3 p-t-74">
            <!-- Logo -->
            <a href="" class="logo3">
               <img src="../PGJ/images/icons/logo.png" alt="IMG-LOGO">
            </a>
            <!-- Header Icon -->

            <div class="header-icons3 p-t-38 p-b-60 p-l-8">
               <% if(data.userData) { %>
               <a href="/myinfo" class="header-wrapicon1 dis-block"></a>
               <img src="../PGJ/images/icons/icon-header-01.png" class="header-icon1" alt="ICON">
               <% } else { %>
               <img id='noData-0' src="../PGJ/images/icons/icon-header-01.png" class="header-icon1" alt="ICON"
                  onclick='noDataAlert()'>
               <% }%>


               <span class="linedivide1"></span>

               <div class="header-wrapicon2">
                  <% if(data.userData) { %>
                  <img src="../PGJ/images/icons/icon-header-02.png" class="header-icon1 js-show-header-dropdown"
                     alt="ICON">
                  <% } else { %>
                  <img id='noData-0' src="../PGJ/images/icons/icon-header-02.png" class="header-icon1" alt="ICON"
                     onclick="noDataAlert()">
                  <% }%>
               </div>
            </div>

            <!-- Menu -->
            <div class="wrap_menu">
               <nav class="menu">
                  <ul class="main_menu">
                     <li>
                        <a href="/">Home</a>
                     </li>
                     <li>
                        <a href="/shop/1">Shop</a>
                     </li>
                     <% if(!data.userData) { %>
                     <li>
                        <a href="/login">Login</a>
                     </li>
                     <li class="sale-noti">
                        <a href="/register">Register</a>
                     </li>
                     <% } else { %>
                     <% if (data.userData.userDN == 1) { %>
                     <li>
                        <a href="/buytoken">Token</a>
                     </li>
                     <li>
                        <a href="/itemup">Itemup</a>
                     </li>
                     <li>
                        <a href="/myinfo">MYINFO</a>
                     </li>
                     <li>
                        <a href="/logout">LOGOUT</a>
                     </li>
                     <% } else if (data.userData.userDN == 2) { %>
                     <li>
                        <a href="/sellerconfirm">Sellerconfirm</a>
                     </li>
                     <li>
                        <a href="/myinfo">MYINFO</a>
                     </li>
                     <li>
                        <a href="/logout">LOGOUT</a>
                     </li>
                     <% } else { %>
                     <li>
                        <a href="/buytoken">Token</a>
                     </li>
                     <li>
                        <a href="/myinfo">MYINFO</a>
                     </li>
                     <li>
                        <a href="/logout">LOGOUT</a>
                     </li>
                     <% } %>
                     <% } %>

                  </ul>
               </nav>
            </div>
         </div>

         <div class="bottombar flex-col-c p-b-65">
            <div class="bottombar-social t-center p-b-8">
               <a href="https://www.facebook.com/" class="topbar-social-item fa fa-facebook"></a>
               <a href="https://www.instagram.com/" class="topbar-social-item fa fa-instagram"></a>
               <a href="https://www.youtube.com/" class="topbar-social-item fa fa-youtube-play"></a>
            </div>
         </div>
      </div>

      <!-- Header Mobile -->
      <div class="wrap_header_mobile">
         <!-- Logo moblie -->
         <a href="" class="logo-mobile">
            <img src="../PGJ/images/icons/logo.png" alt="IMG-LOGO">
         </a>

         <!-- Button show menu -->
         <div class="btn-show-menu">
            <!-- Header Icon mobile -->
            <div class="header-icons-mobile">
               <a href="#" class="header-wrapicon1 dis-block">
                  <img src="../PGJ/images/icons/icon-header-01.png" class="header-icon1" alt="ICON">
               </a>

               <span class="linedivide2"></span>

               <div class="header-wrapicon2">
                  <img src="../PGJ/images/icons/icon-header-02.png" class="header-icon1 js-show-header-dropdown"
                     alt="ICON">
               </div>
            </div>

            <div class="btn-show-menu-mobile hamburger hamburger--squeeze">
               <span class="hamburger-box">
                  <span class="hamburger-inner"></span>
               </span>
            </div>
         </div>
      </div>

      <!-- Menu Mobile -->
      <div class="wrap-side-menu">
         <nav class="side-menu">
            <ul class="main-menu">

               <li class="item-topbar-mobile p-l-10">
                  <div class="topbar-social-mobile">
                     <a href="https://www.facebook.com/" class="topbar-social-item fa fa-facebook"></a>
                     <a href="https://www.instagram.com/" class="topbar-social-item fa fa-instagram"></a>
                     <a href="https://www.youtube.com/" class="topbar-social-item fa fa-youtube-play"></a>
                  </div>
               </li>
               <li class="item-menu-mobile">
                  <a href="/">Home</a>
               </li>
               <li class="item-menu-mobile">
                  <a href="/shop/1">Shop</a>
               </li>
               <% if(!data.userData) { %>
               <li class="item-menu-mobile">
                  <a href="/login">Login</a>
               </li>
               <li class="item-menu-mobile">
                  <a href="/register">Register</a>
               </li>
               <% } else { %>
               <% if (data.userData.userDN == 1) { %>
               <li class="item-menu-mobile">
                  <a href="/buytoken">Token</a>
               </li>
               <li class="item-menu-mobile">
                  <a href="/itemup">Itemup</a>
               </li>
               <li class="item-menu-mobile">
                  <a href="/myinfo">MYINFO</a>
               </li>
               <li class="item-menu-mobile">
                  <a href="/logout">LOGOUT</a>
               </li>
               <% } else if (data.userData.userDN == 2) { %>
               <li class="item-menu-mobile">
                  <a href="/sellerconfirm">Sellerconfirm</a>
               </li>
               <li class="item-menu-mobile">
                  <a href="/myinfo">MYINFO</a>
               </li>
               <li class="item-menu-mobile">
                  <a href="/logout">LOGOUT</a>
               </li>
               <% } else { %>
               <li class="item-menu-mobile">
                  <a href="/buytoken">Token</a>
               </li>
               <li class="item-menu-mobile">
                  <a href="/myinfo">MYINFO</a>
               </li>
               <li class="item-menu-mobile">
                  <a href="/logout">LOGOUT</a>
               </li>
               <% } %>
               <% } %>
            </ul>
         </nav>
      </div>
   </header>

   <div class="container1-page">
      <!-- Slide1 -->
     
      <!-- Our product -->
      <section class="bgwhite p-b-58">
			<!-- Product Detail -->
            <div class="container bgwhite p-t-35 p-b-80">
                    <div class="flex-w flex-sb">
                        <div class="w-size13 p-t-30 respon5">
                            <div class="wrap-slick3 flex-sb flex-w">
                                <div class="wrap-slick3-dots"></div>
                                <div class="wrap-pic-w">
                                    <img src="../../ohj/images/itemimages/detail_images/<%= data.itemData.item_img %>" alt="IMG-PRODUCT">
                                </div>
                            </div>
                        </div>
            
                        <div class="w-size14 p-t-30 respon5">
                            <h4 class="product-detail-name m-text16 p-b-13">
                                <%= data.itemData.item_name %>
                            </h4>
            
                            <span class="m-text17">
                                <%= data.itemData.item_price %> MDT
                            </span>
            
                            <p class="s-text8 p-t-10">
                                <%= data.itemData.item_info %>
                            </p>
            
                            <!--  -->
                            <div class="p-t-33 p-b-60">
                                <div class="flex-m flex-w p-b-10">
                                    <div class="s-text15 w-size15 t-center">
                                        Size
                                    </div>
            
                                    <div class="rs2-select2 rs3-select2 bo4 of-hidden w-size16">
                                        <select class="selection-2" name="size">
                                            <option>Choose an option</option>
                                            <option>Size S</option>
                                            <option>Size M</option>
                                        </select>
                                    </div>
                                </div>
            
                                <div class="flex-m flex-w">
                                    <div class="s-text15 w-size15 t-center">
                                        Color
                                    </div>
            
                                    <div class="rs2-select2 rs3-select2 bo4 of-hidden w-size16">
                                        <select class="selection-2" name="color">
                                            <option>Choose an option</option>
                                            <option>Gray</option>
                                            <option>Red</option>
                                        </select>
                                    </div>
                                </div>
            
                                <div class="flex-r-m flex-w p-t-10">
                                    <div class="w-size16 flex-m flex-w">
                                        <div class="flex-w bo5 of-hidden m-r-22 m-t-10 m-b-10">
                                            <button class="btn-num-product-down color1 flex-c-m size7 bg8 eff2">
                                                <i class="fs-12 fa fa-minus" aria-hidden="true"></i>
                                            </button>
            
                                            <input class="size8 m-text18 t-center num-product" type="number" name="num-product"
                                                value="1">
            
                                            <button class="btn-num-product-up color1 flex-c-m size7 bg8 eff2">
                                                <i class="fs-12 fa fa-plus" aria-hidden="true"></i>
                                            </button>
                                        </div>
            
                                        <div class="btn-addcart-product-detail size9 trans-0-4 m-t-10 m-b-10">
                                            <!-- Button -->
                                            <form action="/contract" method='post'>
                                                <button class="flex-c-m sizefull bg1 bo-rad-23 hov1 s-text1 trans-0-4" name='data'
                                                    value="<%= JSON.stringify(data.itemData) %>" type='submit'>
                                                    Buy
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
            
                            <div class="p-b-45">
                                <span class="s-text8 m-r-35">GGO53<%= data.itemData.item_code %>BOF</span>
                                <span class="s-text8">Categories: <%= data.itemData.item_category %></span>
                            </div>
            
                            <!--  -->
                            <div class="wrap-dropdown-content bo6 p-t-15 p-b-14 active-dropdown-content">
                                <h5 class="js-toggle-dropdown-content flex-sb-m cs-pointer m-text19 color0-hov trans-0-4">
                                    Description
                                    <i class="down-mark fs-12 color1 fa fa-minus dis-none" aria-hidden="true"></i>
                                    <i class="up-mark fs-12 color1 fa fa-plus" aria-hidden="true"></i>
                                </h5>
            
                                <div class="dropdown-content dis-none p-t-15 p-b-23">
                                    <p class="s-text8">
                                        <%= data.itemData.item_info %>
                                    </p>
                                </div>
                            </div>
            
                            <div class="wrap-dropdown-content bo7 p-t-15 p-b-14">
                                <h5 class="js-toggle-dropdown-content flex-sb-m cs-pointer m-text19 color0-hov trans-0-4">
                                    Additional information
                                    <i class="down-mark fs-12 color1 fa fa-minus dis-none" aria-hidden="true"></i>
                                    <i class="up-mark fs-12 color1 fa fa-plus" aria-hidden="true"></i>
                                </h5>
            
                                <div class="dropdown-content dis-none p-t-15 p-b-23">
                                    <p class="s-text8">
                                        COMPANY: <%= data.itemData.item_inc %>
                                    </p>
                                </div>
                            </div> 
            
                            <div class="wrap-dropdown-content bo7 p-t-15 p-b-14">
                                    <div class="flex-w flex-sb bo10 p-t-15 p-b-20">
                                            <div class="sizefull w-full-sm">
                                                <form>
                                                    <div
                                                        class="rs2-select2 rs3-select2 rs4-select2 bo4 of-hidden sizefull m-t-8 m-b-12">
                                                        <select class="selection-2" id='selectopinion'>
                                                            <option name='opinion' value='0'>가격에 비해 가성비가 좋아요.
                                                            </option>
                                                            <option name='opinion' value='1'>이미지보다 실물이 더 예뻐요
                                                            </option>
                                                            <option name='opinion' value='2'>상품이 튼튼해요</option>
                                                            <option name='opinion' value='3'>가격에 비해 가성비가 좋아요
                                                            </option>
                                                        </select>
                                                    </div>
            
                                                    <div class="sizefull bo4 m-b-12 m-t-8">
                                                        <input class="sizefull s-text7 p-l-15 p-r-15" id='textarea' type="text" placeholder="Please register the product review.">
                                                    </div>
            
                                                    <div class="size15 trans-0-4">
                                                        <!-- Button -->
                                                        <a href="#" class="flex-c-m sizefull bg1 bo-rad-23 hov1 s-text1 trans-0-4">
                                                            Review
                                                        </a>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                        
                                <h5 class="js-toggle-dropdown-content flex-sb-m cs-pointer m-text19 color0-hov trans-0-4">
                                    Reviews (<%= data.commentData.length %>)
                                    <i class="down-mark fs-12 color1 fa fa-minus dis-none" aria-hidden="true"></i>
                                    <i class="up-mark fs-12 color1 fa fa-plus" aria-hidden="true"></i>
                                </h5>
            
                                <div class="dropdown-content dis-none p-t-15 p-b-23">
                                    <p class="s-text8">
                                        <% if (data.commentData) { %>
                                        <% for(var  i = 0; i < data.commentData.length; i++) { %>
                                        <%= data.commentData[i].buyer %> <%= data.commentData[i].comment %>
                                        <% if(data.commentData[i].selectoption == 0) { %>
                                        가격에 비해 가성비가 좋아요
                                        <% } else if (data.commentData[i].selectoption == 1) { %>
                                        이미지보다 실물이 더 예뻐요
                                        <% } else if (data.commentData[i].selectoption == 2) { %>
                                        상품이 튼튼해요
                                        <% } else if (data.commentData[i].selectoption == 3) { %>
                                        가격에 비해 가성비가 좋아요
                                        <% } %>
                                        <hr><br>
                                        <% } %>
                                        <% } else {  %>
                                        작성된 댓글이 없습니다.
                                        <% } %>
                                    </p>
                                    <button type='hidden' id='myBtn' name='itemCode' value='<%= data.itemData.item_code %>'>
                                    <!-- <div id="myModal">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <span class="close">&times;</span>
                                                <h2>Check Your Opinion</h2>
                                            </div>
                                            <div class="modal-body">
                                                <section class="cart bgwhite p-t-70 p-b-100">
                                                    <div class="container">
            
                                                        <div class="bo9 sizefull p-l-40 p-r-40 p-t-30 p-b-38 m-t-30 m-r-0 m-l-auto p-lr-15-sm">
                                                            <h5 class="m-text20 p-b-24">
                                                                Reviews
                                                            </h5>
                                                        </div>
                                                    </div>
                                                </section>
                                            </div>
                                        </div>
                                    </div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            
      </section>

      <!-- Footer -->
      <footer class="bg6 p-t-45 p-b-43 p-l-65 p-r-65 p-lr-0-xl1">
         <div class="flex-w p-b-90">
            <div class="w-size6 p-t-30 p-l-15 p-r-15 respon6">
               <h4 class="s-text12 p-b-30">
                  GET IN TOUCH
               </h4>

               <div>
                  <p class="s-text7 w-size26">
                     서울 서초구 서초중앙로 63 리더스빌딩 5층 (서초구 서초동 1599-11)
                  </p>

                  <div class="flex-m p-t-30">
                     <a href="https://www.facebook.com/" class="fs-18 color1 p-r-20 fa fa-facebook"></a>
                     <a href="https://www.instagram.com/" class="fs-18 color1 p-r-20 fa fa-instagram"></a>
                     <a href="https://www.youtube.com/" class="fs-18 color1 p-r-20 fa fa-youtube-play"></a>
                  </div>
               </div>
            </div>

            <div class="w-size7 p-t-30 p-l-15 p-r-15 respon7">
               <h4 class="s-text12 p-b-30">
                  Categories
               </h4>

               <ul>
                  <li class="p-b-9">
                     <a href="#" class="s-text7">
                        Toy
                     </a>
                  </li>

                  <li class="p-b-9">
                     <a href="#" class="s-text7">
                        Furniture
                     </a>
                  </li>

                  <li class="p-b-9">
                     <a href="#" class="s-text7">
                        Jewelry
                     </a>
                  </li>

                  <li class="p-b-9">
                     <a href="#" class="s-text7">
                        Accessory
                     </a>
                  </li>

                  <li class="p-b-9">
                        <a href="#" class="s-text7">
                           Food
                        </a>
                     </li>
               </ul>
            </div>

            <div class="w-size7 p-t-30 p-l-15 p-r-15 respon7">
               <h4 class="s-text12 p-b-30">
                  Links
               </h4>

               <ul>
                  <li class="p-b-9">
                     <a href="#" class="s-text7">
                        Search
                     </a>
                  </li>

                  <li class="p-b-9">
                     <a href="#" class="s-text7">
                        About Us
                     </a>
                  </li>

                  <li class="p-b-9">
                     <a href="#" class="s-text7">
                        Contact Us
                     </a>
                  </li>

                  <li class="p-b-9">
                     <a href="#" class="s-text7">
                        Returns
                     </a>
                  </li>
               </ul>
            </div>

            <div class="w-size7 p-t-30 p-l-15 p-r-15 respon7">
               <h4 class="s-text12 p-b-30">
                  Help
               </h4>

               <ul>
                  <li class="p-b-9">
                     <a href="#" class="s-text7">
                        Track Order
                     </a>
                  </li>

                  <li class="p-b-9">
                     <a href="#" class="s-text7">
                        Returns
                     </a>
                  </li>

                  <li class="p-b-9">
                     <a href="#" class="s-text7">
                        Shipping
                     </a>
                  </li>

                  <li class="p-b-9">
                     <a href="#" class="s-text7">
                        FAQs
                     </a>
                  </li>
               </ul>
            </div>

            <div class="w-size8 p-t-30 p-l-15 p-r-15 respon6">
               <h4 class="s-text12 p-b-30">
                  Newsletter
               </h4>

               <form>
                  <div class="effect1 w-size9">
                     <input class="s-text7 bg6 w-full p-b-5" type="text" name="email" placeholder="email@example.com">
                     <span class="effect1-line"></span>
                  </div>

                  <div class="w-size2 p-t-20">
                     <!-- Button -->
                     <button class="flex-c-m size2 bg4 bo-rad-23 hov1 m-text3 trans-0-4">
                        Subscribe
                     </button>
                  </div>

               </form>
            </div>
         </div>

         <div class="t-center p-l-15 p-r-15">
            <div class="t-center s-text8 p-t-20">
               경기도 블록체인 해커톤을 위해 만들어진 사이트입니다.
            </div>
         </div>
      </footer>
   </div>


   <!-- Back to top -->
   <div class="btn-back-to-top bg0-hov" id="myBtn">
      <span class="symbol-btn-back-to-top">
         <i class="fa fa-angle-double-up" aria-hidden="true"></i>
      </span>
   </div>

   <!-- Container Selection -->
   <div id="dropDownSelect1"></div>
   <div id="dropDownSelect2"></div>

   <!--===============================================================================================-->
   <script type="text/javascript" src="../PGJ/vendor/jquery/jquery-3.2.1.min.js"></script>
   <!--===============================================================================================-->
   <script type="text/javascript" src="../PGJ/vendor/animsition/js/animsition.min.js"></script>
   <!--===============================================================================================-->
   <script type="text/javascript" src="../PGJ/vendor/bootstrap/js/popper.js"></script>
   <script type="text/javascript" src="../PGJ/vendor/bootstrap/js/bootstrap.min.js"></script>
   <!--===============================================================================================-->
   <script type="text/javascript" src="../PGJ/vendor/select2/select2.min.js"></script>
   <script type="text/javascript">
       $(".selection-1").select2({
           minimumResultsForSearch: 20,
           dropdownParent: $('#dropDownSelect1')
       });

       $(".selection-2").select2({
           minimumResultsForSearch: 20,
           dropdownParent: $('#dropDownSelect2')
       });
   </script>

   <script>
       async function submitData() {
           var itemCode = document.getElementById('myBtn').value;
           var dataindex = document.getElementById('selectopinion').value;
           var textarea = document.getElementById('textarea').value;
           try {
               console.log(itemCode + dataindex + textarea);

               const response = await fetch(`http://localhost:3000/submitcomment`, {
                   method: 'POST',
                   headers: {
                       "Content-Type": 'application/json'
                   },
                   body: JSON.stringify({ itemCode, dataindex, textarea })
               });
               var dataResult = await response.json();
               console.log('dataResult', dataResult);
               if (dataResult = true) {
                   modal.style.display = "none";
               } else {
                   window.alert('No Comment');
               }
           } catch (err) {
               window.alert('Data submit Err');
           }
       }

       // Get the modal
       var modal = document.getElementById("myModal");

       // Get the button that opens the modal
       var btn = document.getElementById("myBtn");

       // Get the <span> element that closes the modal
       var span = document.getElementsByClassName("close")[0];

       // When the user clicks the button, open the modal 
       btn.onclick = function () {
           modal.style.display = "block";
       }

       // When the user clicks on <span> (x), close the modal
       span.onclick = function () {
           modal.style.display = "none";
       }

       // When the user clicks anywhere outside of the modal, close it
       window.onclick = function (event) {
           if (event.target == modal) {
               modal.style.display = "none";
           }
       }
   </script>
   <!--===============================================================================================-->
   <script type="text/javascript" src="../PGJ/vendor/slick/slick.min.js"></script>
   <script type="text/javascript" src="../PGJ/js/slick-custom.js"></script>
   <!--===============================================================================================-->
   <script type="text/javascript" src="../PGJ/vendor/sweetalert/sweetalert.min.js"></script>
   <script type="text/javascript">
       $('.block2-btn-addcart').each(function () {
           var nameProduct = $(this).parent().parent().parent().find('.block2-name').html();
           $(this).on('click', function () {
               swal(nameProduct, "is added to cart !", "success");
           });
       });

       $('.block2-btn-addwishlist').each(function () {
           var nameProduct = $(this).parent().parent().parent().find('.block2-name').html();
           $(this).on('click', function () {
               swal(nameProduct, "is added to wishlist !", "success");
           });
       });

       $('.btn-addcart-product-detail').each(function () {
           var nameProduct = $('.product-detail-name').html();
           $(this).on('click', function () {
               swal(nameProduct, "is added to wishlist !", "success");
           });
       });
   </script>

   <!--===============================================================================================-->
   <script src="../PGJ/js/main.js"></script>

</body>

</html>